import {
    Input,
    Select,
    Button,
    Table,
    Switch,
    Modal,
    Form
} from 'antd';
import React, { useState, useEffect } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { getGoodsList, setGoodsList, delGoodsList, addGoods } from "../../api/goods";
const { Option } = Select;

export interface DataType {
    //序号
    id?: number,
    // 产品名称
    goodsName: string,
    //产品价格
    price: number,
    // 产品图片
    goodsPicSwiper: string,
    // 产品描述
    materials: string,
    // 产品口味
    taste: string, //2
    // 产品提示
    tips: string, //1
    // 产品温度
    tagTemperature: string,
    // 产品成分
    tagContent: string,
    // 产品分类
    category: string,
    // 商品容量
    cupSize: string,
    // 商品销量
    sales: number,
    // 商品库存
    inventory: number,
    // 是否热销
    isHot: boolean,
    // 是否推荐
    isRecommend: boolean,
    key: DataType['id'],
}

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const Search: React.FC = () => {
    const [goodsName, setGoodsName] = useState<string>('')
    const [price, setprice] = useState<string>('')
    const [goodsPicSwiper, setgoodsPicSwiper] = useState<string>('')
    const [materials, setmaterials] = useState<string>('')
    const [taste, settaste] = useState<string>('')
    const [tips, settips] = useState<string>('')
    const [tagTemperature, settagTemperature] = useState<string>('')
    const [tagContent, settagContent] = useState<string>('')
    const [category, setcategory] = useState<string>('')
    const [cupSize, setcupSize] = useState<string>('')
    const [sales, setsales] = useState<string>('')
    const [inventory, setinventory] = useState<string>('')

    

    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        const data = {
            goodsName,
            price: Number(price),
            goodsPicSwiper,
            materials,
            taste,
            tips,
            tagTemperature,
            tagContent,
            category,
            cupSize,
            sales: Number(sales),
            inventory: Number(inventory),
            isHot: true,
            isRecommend: true
        }
        console.log(data);
        
        addGoods(data).then(res => {
            console.log(res);
            // 必须搭配这个使用
            // eslint-disable-next-line no-restricted-globals
            location.reload()
        })
    };
    const handleCancel = () => {
        setOpen(false);
    };
    const [form] = Form.useForm();

    // 搜索
    const [search, setSearch] = useState<string>('')

    const [proList, setProList] = useState<DataType[]>([]);
    const getProList = () => {
        getGoodsList().then(res => {
            if(search === '') {
                setProList(res.data)
            } else {
                var arr = res.data.filter((item:any) => {
                   return item.goodsName.includes(search)
                })
                setProList(arr)
            }   
        })
    }
    useEffect(() => {
        getProList();
    }, [search])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            width: 80,
            dataIndex: 'id',
            key: 'name',
            fixed: 'left',
            align: 'center',
        },
        {
            title: '商品名称',
            width: 100,
            dataIndex: 'goodsName',
            key: '1',
            fixed: 'left',
            align: 'center'
        },
        {
            title: '商品分类',
            width: 100,
            dataIndex: 'category',
            key: '2',
            fixed: 'left',
            align: 'center',
        },
        {
            title: '商品描述',
            dataIndex: 'materials',
            width: 150,
            className: 'materials',
            key: '3',
            align: 'center',
            render: (text) => {
                return (
                    <>
                        <div style={{
                            width: '110px',
                            height: '65px', overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: '3',
                            WebkitBoxOrient: 'vertical'
                        }}>{text}</div>
                    </>
                )
            }
        },
        {
            title: '商品口味',
            dataIndex: 'taste',
            width: 150,
            className: 'taste',
            key: '33',
            align: 'center',
            render: (text) => {
                return (
                    <>
                        <div style={{
                            width: '110px',
                            height: '65px', overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: '3',
                            WebkitBoxOrient: 'vertical'
                        }}>{text}</div>
                    </>
                )
            }
        },
        {
            title: '商品提示',
            dataIndex: 'tips',
            width: 150,
            className: 'tips',
            key: '333',
            align: 'center',
            render: (text) => {
                return (
                    <>
                        <div style={{
                            width: '110px',
                            height: '65px', overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            display: '-webkit-box',
                            WebkitLineClamp: '3',
                            WebkitBoxOrient: 'vertical'
                        }}>{text}</div>
                    </>
                )
            }
        },
        {
            title: '商品容量',
            dataIndex: 'cupSize',
            width: 100,
            key: '4',
            align: 'center',
        },
        {
            title: '商品图片',
            dataIndex: 'goodsPicSwiper',
            key: '5',
            width: 100,
            align: 'center',
            render: (text, list) => {
                return (
                    <>
                        <img src={list.goodsPicSwiper[0]} alt="" style={{ width: '60px' }} />
                    </>
                )
            }

        },
        {
            title: '商品温度',
            dataIndex: 'tagTemperature',
            width: 100,
            key: '6',
            align: 'center',
        },
        {
            title: '商品成分',
            dataIndex: 'tagContent',
            width: 100,
            key: '7',
            align: 'center',
        },
        {
            title: '商品价格',
            width: 100,
            dataIndex: 'price',
            align: 'center',
            key: '8',
        },
        {
            title: '商品销量',
            dataIndex: 'sales',
            width: 100,
            key: '9',
            align: 'center',
        },
        {
            title: '商品库存',
            key: '10',
            dataIndex: 'inventory',
            align: 'center',
            width: 100,
        },
        {
            title: '是否热销',
            width: 100,
            dataIndex: 'isHot',
            align: 'center',
            key: '11',
            render: (text, record: any, index) => {
                return (
                    <>
                        <Switch defaultChecked={text} onClick={() => {
                            setGoodsList(record.id, { ...record, isHot: !text })
                        }} />
                    </>
                )
            }
        },
        {
            title: '是否推荐',
            align: 'center',
            dataIndex: 'isRecommend',
            width: 100,
            key: '12',
            render: (text, record: any, index) => {
                return (
                    <>
                        <Switch defaultChecked={text} onClick={() => {
                            setGoodsList(record.id, { ...record, isRecommend: !text })
                        }} />
                    </>
                )
            }
        },
        {
            title: '操作',
            align: 'center',
            dataIndex: 'address',
            key: '13',
            fixed: 'right',
            width: 150,
            render: (text, record: any, index) => {
                return (
                    <>
                        <EditOutlined style={{ color: '#fff', width: '40px', height: '40px', fontSize: '20px', backgroundColor: '#1890ff', borderRadius: '20px', lineHeight: '40px', marginRight: '10px' }} />
                        <DeleteOutlined style={{ color: '#ff4d4f', width: '40px', height: '40px', fontSize: '20px', borderRadius: '20px', lineHeight: '40px', border: '1px solid #ff4d4f' }}
                            onClick={
                                () => {
                                    delGoodsList(record.id)
                                    // eslint-disable-next-line no-restricted-globals
                                    location.reload()
                                }
                            } />
                    </>
                )
            }
        },

    ];
    
    return (
        <>
            <div className="site-input-group-wrapper">
                <Input.Group compact>
                    <Select defaultValue="Option0" style={{ width: '100px', marginRight: '10px', color: '#8c8c8c' }}>
                        <Option value="Option0">全部</Option>
                        <Option value="Option1">茶</Option>
                        <Option value="Option2">鲜果</Option>
                        <Option value="Option3">冰淇淋</Option>
                    </Select>
                    <Input style={{ width: '200px', color: '#bfbfbf', fontSize: '14px' }} placeholder="请输入关键字" 
                    onChange={(e:any) => {
                        setSearch(e.target.value)
                        console.log('search',search);
                    }}
                    />
                    <Button type="primary" style={{ width: '64px', marginLeft: '10px', height: '32px', borderRadius: '2px' }}
                    value={search} 
                    onClick={() => {
                        
                    }}
                    >
                        搜索
                    </Button>
                    <Button type="primary" style={{ width: '90px', marginLeft: '10px', height: '32px', borderRadius: '2px' }} onClick={showModal} >
                        添加商品
                    </Button>
                </Input.Group>
                <Table columns={columns} dataSource={proList} scroll={{ x: 1300, y: 'calc(100vh - 330px)' }} bordered={true} style={{ marginTop: '10px' }} />
            </div>

            <Modal
                // centered={true}
                open={open}
                title="添加用户"
                onCancel={handleCancel}
                footer={[
                    <Button key="submit" type="primary" loading={loading}
                        onClick={handleOk}>
                        提交
                    </Button>,
                    <Button key="back" onClick={handleCancel}>
                        取消
                    </Button>,
                ]}
            >
                <Form {...layout} form={form} name="control-hooks" 
                    style={{
                        marginLeft: '-160px'
                    }}
                >
                    <Form.Item name="goodsName" label="商品名称" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={goodsName}
                            onChange={(e: any) => {
                                setGoodsName(e.target.value)
                                console.log(goodsName);
                            }}
                            
                        />
                    </Form.Item>
                    <Form.Item name="category" label="商品分类" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}

                    >
                        <Input value={category}
                            onChange={(e: any) => {
                                setcategory(e.target.value)
                                console.log(category);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="materials" label="商品描述" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={materials}
                            onChange={(e: any) => {
                                setmaterials(e.target.value)
                                console.log(materials);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="taste" label="商品口味" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={taste}
                            onChange={(e: any) => {
                                settaste(e.target.value)
                                console.log(taste);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="tips" label="商品提示" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={tips}
                            onChange={(e: any) => {
                                settips(e.target.value)
                                console.log(tips);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="cupSize" label="商品容量" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={cupSize}
                            onChange={(e: any) => {
                                setcupSize(e.target.value)
                                console.log(cupSize);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="goodsPicSwiper" label="商品图片" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={goodsPicSwiper}
                            onChange={(e: any) => {
                                setgoodsPicSwiper(e.target.value)
                                console.log(goodsPicSwiper);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="tagTemperature" label="商品温度" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={tagTemperature}
                            onChange={(e: any) => {
                                settagTemperature(e.target.value)
                                console.log(tagTemperature);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="tagContent" label="商品成分" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={tagContent}
                            onChange={(e: any) => {
                                settagContent(e.target.value)
                                console.log(tagContent);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="price" label="商品价格" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={price}
                            onChange={(e: any) => {
                                setprice(e.target.value)
                                console.log(price);

                            }}
                        />
                    </Form.Item>
                    <Form.Item name="sales" label="商品销量" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={sales}
                            onChange={(e: any) => {
                                setsales(e.target.value)
                                console.log(sales);
                            }}
                        />
                    </Form.Item>
                    <Form.Item name="inventory" label="商品库存" rules={[{ required: true }]}
                    style={{marginLeft: '50px'}}
                    >
                        <Input value={inventory}
                            onChange={(e: any) => {
                                setinventory(e.target.value)
                                console.log(inventory);

                            }}
                        />
                    </Form.Item>

                    <Form.Item
                        noStyle
                        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
                    >
                        {({ getFieldValue }) =>
                            getFieldValue('gender') === 'other' ? (
                                <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
                                    <Input />
                                </Form.Item>
                            ) : null
                        }
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
};
export default Search;